<template>
<div>
    <h1>动画</h1>
<button @click  = "isShow = !isShow">显示/隐藏</button>
<!-- 要用动画的元素在vue中用transition包起来 -->

<!-- 你不给transition标签name属性，那么下面的默认进出动画你能用，但如果你取了名字就不行了 -->
<!-- 给transition加个属性appear='true'可以开局来个进入动画，简写写成appear就行 -->
<transition appear>
    <h2 class='name' v-show="isShow" >我是{{name}}</h2>
</transition>
<!-- transition只能包一个元素标签，如何包更多呢，标签改成transition-group就行了，但是每个元素你都要加个key值 -->

<!-- 字节写动画很麻烦，其实可以考虑第三方动画库 -->
<!-- 比如animate.css,直接npm i animate.css就行,然后再组件的style标签里面直接引入就行import 'animate.css',要动画的元素一样用transition包起来，后面步骤就不一样了，要用再学，很简单 -->
<!-- 用法取npm网站搜啊,npmjs.com -->

<transition name = 'x'>
    <h2 class='name' v-show="isShow" >我是取了名字的动画元素</h2>
</transition>
</div>
</template>

<script>
export default {
    name:'Test',
    data(){
        return {
            name:'测试组件',
            isShow:true
        }
    }
}
</script>


<style>
    .name{
        background: lightblue;
    }
    /* 下面写个动画 */
    @keyframes comeOut{
        from{
            transform:translatex(-100%)
        }
         to{
            transform:translatex(0px)
        }
    }

    /* 下面使用这个动画 */
    /* 如果你想用vue的动画方式，名字不能够乱取 */
    /* 来和走的名字都是固定的 */
    /* 隐藏的时候就触发leave动画，来就是enter动画 */
    .v-enter-active{
        animation: comeOut 1s;
    }
    .v-leave-active{
        /* reverse是颠倒的意思，让动画反正来 */
        animation: comeOut 1s reverse;
    }
    /* 去了名字的transition元素要把v改成你name属性的值 */
    .x-enter-active{
        animation: comeOut 0.5s;
    }
    .x-leave-active{
        /* reverse是颠倒的意思，让动画反正来 */
        animation: comeOut 2s reverse;
    }
</style>